<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" title="选择申请审批人"></my-header>

		<view class="main-body-e">
			<view class="_h1 zi-zhuse">按板块选择</view>
			<view class="mar-lef-10 padding-10">
				<u-collapse>
					<view v-for="(item, index) in dataList" :key="index" class="pos-rel">
						<view class="pos-abs" style="top: 10px;left:-5px;">
							<u-checkbox-group @change="checkboxGroupChange2(index)">
								<u-checkbox v-model="item.checked" shape="circle" :name="item.name" :value="index">
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="mar-lef-20">
							<u-collapse-item :title="item.name + '（'+ item.count +'）'">
								<block v-for="(ite,inde) in item.userInfo" :key="inde">
									<view class="pos-rel">
										<view class="pos-abs" style="top: 10px;">
											<u-checkbox-group @change="checkboxGroupChange">
												<u-checkbox v-model="ite.checked" shape="circle" :name="ite.id">
												</u-checkbox>
											</u-checkbox-group>
										</view>
										<view class="mar-lef-30">
											<view class="dis_flex ali-ite">
												<view>
													<u-avatar size="mini"
														src="https://oaxiaochengxu.0871.cn/morentouxiang.jpg">
													</u-avatar>
												</view>
												<view class="mar-lef-5">
													<view style="color:#101010;">{{ite.name}}</view>
													<view style="color:rgba(0, 81, 186, 1);">{{ite.H9}} {{ite.role}}
													</view>
												</view>
											</view>
											<u-gap height="2" margin-top="20" margin-bottom="20" bg-color="#bbb">
											</u-gap>
										</view>
									</view>
								</block>
							</u-collapse-item>
						</view>
					</view>
				</u-collapse>
			</view>
			<view class="zi-red mar-top-10">温馨提示：*右下角确认按钮</view>
		</view>

		<view class="butt">
			<view class="dis_flex jus-con ali-ite padding-20">
				<view class="_h1 zhuse">已选择：{{number}}人</view>
				<u-button size="mini" type="primary" @click="yesOk()">确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				number: 0,
				dataList: [],
				background: {
					backgroundColor: '',
				},
				cheList: [{
						name: '乐山市（2人）',
						checked: false,
						disabled: false
					},
					{
						name: '眉山市（1人）',
						checked: false,
						disabled: false
					},
					{
						name: '海口市（2人）',
						checked: false,
						disabled: false
					},
					{
						name: '小怪线充项目（0人）',
						checked: false,
						disabled: false
					},
					{
						name: '桩柜产销项目（1人）',
						checked: false,
						disabled: false
					},
					{
						name: '公司（2人）',
						checked: false,
						disabled: false
					}
				],
			}
		},
		components: {
			myHeader,
		},
		onLoad() {
			this.load();
			this.onSelect();
		},
		methods: {
			// 计算所选人数
			countNumber() {
				this.number = 0
				let len = this.dataList.length;
				for (let i = 0; i < len; i++) {
					let lens = this.dataList[i].userInfo.length
					for (let ii = 0; ii < lens; ii++) {
						if (this.dataList[i].userInfo[ii].checked) {
							this.number += 1;
						}
					}
				}
			},
			// 账本多选框事件
			checkboxGroupChange2(e) {
				// 根据账本选中值来判断是否全选和全未选
				if (this.dataList[e].checked) {
					this.dataList[e].userInfo.map(data => {
						data.checked = true;
					})
				} else {
					this.dataList[e].userInfo.map(data => {
						data.checked = false;
					})
				}
				this.countNumber();
			},
			// 人员多选框事件
			checkboxGroupChange(e) {
				this.countNumber();
			},
			// 首次查询人员信息
			async onSelect() {
				let res = await this.asyncPublic('/team/Index/onSelectTest', 1)
				console.log(res)
				this.dataList = res.data.list
				this.load_close();
			},
			yesOk() {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				console.log(pages)
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.sh = 100; //修改上一页data里面的sh参数值为100
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
		},
	}
</script>

<style>
	.butt {
		position: fixed;
		bottom: 0px;
		width: 100%;
		left:0px;
	}
</style>
